<template>
	<view class="update-phone-num">
		<titleName :name="name"></titleName>
		<view class="title-bgc"></view>
		<view class="question">
			<text>*</text>问题描述或建议
		</view>
		<view class="itp-wrap">

			<textarea v-model="params.content" placeholder="详述您的操作步骤和现象，并提供截图更有效助 于我们快速解决您的问题" maxlength="-1"
				placeholder-class="ipt-class"></textarea>
		</view>
		<view class="phone-wrap">
			<view class="name"> <text>*</text> 联系电话</view>
			<view class="ipt">
				<image class="img" src="../../static/phone.png" mode=""></image>
				<input type="text" v-model="params.mobile" placeholder="手机号码" placeholder-class="ipt-phone" />
			</view>
		</view>
		<view class="upload-phone">
			<view class="name">上传截图</view>
			<view style="display: flex;flex-wrap: wrap;">
				<view class="upload" @click="checkImage" style="margin-right: 20rpx;">
					<image src="https://splendid.oss-cn-beijing.aliyuncs.com/static/imghazardouswaste/phone.png"
						mode="">
					</image>
					<text>（选择照片）</text>
				</view>
				<view :class="['for-image',index==2?'sb':'']" v-for="(item,index) in images" :key="index">
					<image :src="item" mode="">
					</image>
					<view class="dele" @click="deleImage(index)">✕</view>
				</view>
			</view>
		</view>
		<view class="btn-wrap">
			<button @click="submit">提交</button>
		</view>
	</view>
</template>

<script setup>
	import titleName from '../../components/titleName.vue'
	import http from '../../request/index'
	import uploadFile from '../../request/uploadFile.js'
	import {
		reactive,
		ref
	} from 'vue'
	let name = "意见反馈"
	let images = reactive([])
	let params = reactive({})
	let checkImage = () => {
		uni.chooseImage({
			sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			count: 10,
			success: function(res) {
				let tempFilePaths = res.tempFilePaths
				console.log(tempFilePaths, 'tempFilePaths');
				for (var i = 0; i < tempFilePaths.length; i++) {
					uploadFile({
						filePath: tempFilePaths[i]
					}).then((res) => {

						if (res.code == 0) {
							images.push(res.data.url)
							console.log(images, 'ss');
							// enterpriseMsg.authbook = res.data.url
						}

					})
				}



			}
		});

	}
	let deleImage = (index) => {

		images.splice(index, 1)

	}
	let submit = () => {
		let reg = /^1\d{10}/
		if (!reg.test(params.mobile)) {
			uni.showToast({
				title: '手机号格式有误',
				icon: 'error'
			})
			return
		}
		if (!params.content) {
			uni.showToast({
				title: '请输入问题描述或建议',
				icon: "none"
			})
			return
		}
		http({
			url: '/feedback/addRecord',
			data: {
				sitephoto: images.join(','),
				...params
			}
		}).then((res) => {
			if (res.code == 0) {
				uni.showToast({
					title: '提交成功',
					icon: 'none'
				})
				images.length = 0
				for (let key in params) {
					delete params[key]
				}
			}

		})
	}
</script>

<style lang="scss" scoped>
	:deep(.ipt-class) {

		font-weight: 400;
		font-size: 31rpx;
		color: #BFBEBE;
		line-height: 50rpx;

	}

	:deep(.ipt-phone) {

		font-weight: 500;
		font-size: 31rpx;
		color: #BFBEBE;

	}

	.update-phone-num {
		width: 100vw;
		height: 100vh;
		padding-top: 160rpx;
		padding-bottom: 50rpx;

		.title-bgc {
			background: #0874FA;
			height: 160rpx;
			width: 100vw;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 9;
		}

		.question {
			margin-top: 40rpx;
			padding-left: 31rpx;
			margin-bottom: 32rpx;

			text {
				color: #F82A24;
			}

			font-weight: 400;
			font-size: 33rpx;
			color: #000;

		}

		.btn-wrap {
			padding: 0 39rpx;
			margin-top: 104rpx;

			button {
				width: 100%;
				height: 88rpx;
				background: #0874FA;
				border-radius: 44rpx;

				font-weight: 400;
				font-size: 34rpx;
				color: #FFFFFF;

			}
		}

		.upload-phone {
			margin-top: 40rpx;
			padding-left: 45rpx;


			.name {

				font-weight: 500;
				font-size: 33rpx;
				color: #000000;
				margin-bottom: 30rpx;

			}

			.for-image {
				margin-right: 20rpx;
				margin-top: 20rpx;
				position: relative;

				image {
					width: 150rpx;
					height: 150rpx;
				}
			}

			.dele {
				position: absolute;

				width: 30rpx;
				height: 30rpx;
				background: #989A9E;
				position: absolute;
				border-radius: 50%;
				right: -15rpx;
				top: -15rpx;
				color: #FFFFFF;
				display: flex;
				font-size: 17rpx;
				align-items: center;
				justify-content: center;
			}



			.for-image:nth-of-type(1),
			.for-image:nth-of-type(2),
			.for-image:nth-of-type(3) {
				margin-top: 0rpx !important;
			}

			.sb {
				margin-top: 0rpx;
			}

			.upload {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				width: 149rpx;
				height: 149rpx;
				background: #FFFFFF;
				border-radius: 7rpx;
				border: 2px dashed #BFBFBF;

				image {
					width: 40rpx;
					height: 35rpx;
				}

				text {
					margin-top: 11rpx;
					font-weight: 400;
					font-size: 15rpx;
					color: #999999;

				}
			}
		}

		.phone-wrap {
			padding-left: 48rpx;
			padding-right: 48rpx;
			margin-top: 30rpx;

			.name {
				width: 100%;

				font-weight: 400;
				font-size: 33rpx;
				color: #000;

				text {
					color: #F82A24;
				}
			}

			.ipt {
				margin-top: 20rpx;
				display: flex;
				align-items: center;
				border-bottom: 2rpx solid #AAAAAA;
				height: 89rpx;
				width: 100%;

				.img {
					width: 35rpx;
					height: 35rpx;
					margin-right: 33rpx;
				}

				input {
					flex: 1;
				}
			}


		}

		.itp-wrap {

			width: 693rpx;
			height: 376rpx;
			background: #FFFFFF;
			border-radius: 14rpx;
			margin: 0 auto;
			border: 1px dashed #BFBFBF;
			padding-left: 24rpx;
			padding-top: 30rpx;

			textarea {
				width: 100%;
				line-height: 50rpx;
				height: 100%;
			}
		}


	}
</style>